<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-06 11:23:18
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-06-25 18:06:34
 * @FilePath: \ken147258.topayClient\src\views\other\system\basic-setting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div overflow-hidden class="app-container" v-loading="loading">
    <div class="search-container">
      <FormList :initForm="initSearchForm" v-model:formModel="searchForm"></FormList>
    </div>
    <el-card shadow="never" class="table-container">
      <!-- <template #header>
        <el-button type="success" @click="handleTableBtnClick({}, 'add')"
          ><i-ep-plus />添加</el-button
        >
        <el-button type="warning" @click="handleTableBtnClick({}, 'groud-send')"
          ><i-ep-promotion />一键群发</el-button
        >
        <el-button type="danger" @click="handleTableBtnClick({}, 'unbind-all')"
          ><i-ep-close-bold />一键解綁TG</el-button
        >
      </template> -->
      <!-- <div
        class="info-container border-[#e6e6e6] border-solid border p-[10px] border-l-[5px] mb-[10px]"
      >
        总计增加：<span>{{ tableDatasObj.add_sum }}</span
        >元 总计减少：<span>{{ tableDatasObj.sub_sum }}</span
        >元
      </div> -->
      <comTable
        :data="tableDatasCom"
        :config="tableconfig"
        :tableHeader="tableHeader"
        v-loading="loading"
        @link-click="handleTableBtnClick"
      >
        <template #display="{ row, index }">
          <el-switch prop="display" v-model="row.delivery" />
        </template>
        <template #status="{ row, index }">
          <el-tag type="info" effect="dark">启用</el-tag>
        </template>
      </comTable>

      <pagination
        v-if="tableDatasObj.paging.total > 0"
        v-model:total="tableDatasObj.paging.total"
        v-model:page="tableDatasObj.paging.page"
        v-model:limit="tableDatasObj.paging.limit"
        @pagination="handleQuery"
      />
    </el-card>
    <!-- 弹窗 -->
    <!-- <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      append-to-body
      @close="closeDialog"
      @closed="closedDialog"
    >
      <FormList
        v-if="initDialogForm.initKeys.length"
        v-model:formRef="formDialogId"
        v-model:formModel="formDialogModel"
        :initForm="initDialogForm"
      ></FormList>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleLeftClick">{{
            dialog.leftBtnText
          }}</el-button>
          <el-button @click="handleRightClick">{{ dialog.rightBtnText }}</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogForPayOnOff.visible"
      :title="dialogForPayOnOff.title"
      :width="dialogForPayOnOff.width"
      append-to-body
      @close="closeDialog"
      @closed="closedDialog"
    >
      <ChannelsChange
        v-if="dialogForPayOnOff.visible"
        :id="dialogForPayOnOff.id"
        :type="dialogForPayOnOff.type"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogForPayOnOff.handleRightClick">{{
            dialogForPayOnOff.rightBtnText
          }}</el-button>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import { FormInstance } from "element-plus";
import FormList from "@/components/FormList/index.vue";
import comTable from "@/components/comTable/comTable.vue";
import { log as list } from "@/api/other/payment";
import { cloneDeep } from "lodash";

const getFormatDate = inject("getFormatDate");

const props = defineProps({
  id: {
    required: true,
  },
});

const options = {
  type: [
    { value: "1", label: "订单状态" },
    { value: "2", label: "冲正状态" },
    { value: "3", label: "指派码商" },
  ],
  status: [
    { value: "1", label: "等待支付" },
    { value: "2", label: "已支付" },
    { value: "3", label: "已关闭" },
    { value: "4", label: "已过期" },
  ],
  platform: [
    { value: "1", label: "三方平台" },
    { value: "2", label: "商户" },
    { value: "3", label: "码商" },
  ],
};

const searchForm = ref({});
const initSearchForm = ref({
  // 表单标签位置
  // labelPosition: "right",
  formAttrs: {
    // 是否内联
    inline: true,
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 4,
  },
  // 初始化表单字段
  initKeys: [
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "order_id",
      // 表单属性
      formAttrs: {
        label: "代付订单ID",
        labelWidth: "100px",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入代付订单ID",
        // 是否可清空
        clearable: true,
      },
      value: props.id,
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "action",
      // 表单属性
      formAttrs: {
        label: "操作动作名称",
        labelWidth: "100px",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入操作动作名称",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "msg",
      // 表单属性
      formAttrs: {
        label: "说明",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入说明",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "ip",
      // 表单属性
      formAttrs: {
        label: "ip",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入ip",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "select",
      // 唯一标识
      key: "platform",
      // 表单属性
      formAttrs: {
        label: "平台",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入平台",
        // 是否可清空
        clearable: true,
      },
      options: options.platform,
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "platform_user_id",
      // 表单属性
      formAttrs: {
        label: "平台用户id",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入平台用户id",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "start_time",
      // 表单属性
      formAttrs: {
        label: "开始时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择开始时间",
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "end_time",
      // 表单属性
      formAttrs: {
        label: "结束时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择结束时间",
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "搜索",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
            icon: "search",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: Array<object>) => {
              formRef.validate((valid) => {
                if (valid) {
                  console.log("fields", data);
                  tableDatasObj.value.paging.page = 1;

                  let tempData = { ...data };

                  if (data.start_time) {
                    tempData.start_time = data.start_time.getTime() / 1000;
                  }
                  if (data.end_time) {
                    tempData.end_time = data.end_time.getTime() / 1000;
                  }

                  tableDatasObj.value.queryParams = tempData;

                  handleQuery(tableDatasObj.value.paging);
                }
              });
            },
          },
        },
        {
          // 文本
          text: "重置",
          // 控制属性
          controlAttrs: {
            icon: "refresh",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: resetQuery,
          },
        },
      ],
    },
  ],
});

/** 重置查询 */
function resetQuery(e: Event, formRef: FormInstance, data: Array<object>) {
  // 重置表单
  formRef.resetFields();
  // 查询
  tableDatasObj.value.paging.page = 1;
  tableDatasObj.value.paging.limit = 20;
  tableDatasObj.value.queryParams = { ...searchForm.value };
  const params = {
    ...tableDatasObj.value.queryParams,
    ...data,
    ...tableDatasObj.value.paging,
  };

  handleQuery(params);
}

// 表*********************************************
const loading = ref(false);

const tableDatasObj = ref({
  list: [],
  paging: {
    limit: 20,
    page: 1,
    total: 0,
  },
});
const tableDatasCom = computed(() => {
  return tableDatasObj.value.list.map((item) => {
    return {
      ...item,
      // statusCom: item.status + "" === "1" ? "正常" : "禁用",
      // order_typeCom: options.order_type.find((tItem) => tItem.value === item.order_type)
      //   ?.label,
      typeCom: options.status.find((tItem) => tItem.value === item.type.toString())
        ?.label,
      before_statusCom: options.status.find(
        (tItem) => tItem.value === item.before_status.toString()
      )?.label,
      after_statusCom: options.status.find(
        (tItem) => tItem.value === item.after_status.toString()
      )?.label,
      change_timeCom: getFormatDate(item.change_time),
    };
  });
});
const tableconfig = {
  // tableHeight: 480, //表格高度
  isSelection: false, //显示复选框
  isRowClick: false, //使用行点击
  isStripe: true, //隐藏斑马纹，与背景色不可同时用
  isShowSummary: false, //显示共计
  isIndex: true, //自定义序号
  isNeedPagination: true, //是否需要分页
};
const tableHeader = [
  { label: "主键ID", prop: "id", width: 100 },
  { label: "类型", prop: "typeCom", width: 140 },
  { label: "代付订单id", prop: "order_id", width: 120 },
  { label: "订单号", prop: "order_sn", width: 200 },
  // { label: "操作动作名称", prop: "actionCom", width: 200 },
  { label: "操作动作名称", prop: "action", width: 200 },
  { label: "修改前的状态值", prop: "before_statusCom", width: 180, type: "tag" },
  { label: "修改后的转态值", prop: "after_statusCom", width: 180, type: "tag" },
  { label: "说明", prop: "msg", width: 200 },
  { label: "修改时间", prop: "change_timeCom", width: 200 },
  // {
  //   label: "操作",
  //   isSort: false,
  //   prop: "operation",
  //   columnAttrs: {
  //     fixed: "right",
  //     width: "400",
  //   },
  //   children: [
  //     {
  //       type: "button",
  //       btnText: "重置密钥",
  //       title: "reset",
  //     },
  //     {
  //       type: "button",
  //       btnText: "支付开关",
  //       title: "pay-on-off",
  //     },
  //     {
  //       type: "button",
  //       btnText: "费率",
  //       title: "rate",
  //     },
  //     {
  //       type: "button",
  //       btnText: "代收费率",
  //       title: "agency-rate",
  //     },
  //     // {
  //     //   type: "button",
  //     //   btnText: "TG",
  //     //   title: "tg",
  //     // },
  //     // {
  //     //   type: "button",
  //     //   btnText: "解绑TG",
  //     //   title: "unbind-tg",
  //     // },
  //     {
  //       type: "button",
  //       btnText: "编辑",
  //       title: "edit",
  //     },
  //     {
  //       type: "button",
  //       btnText: "删除",
  //       title: "del",
  //     },
  //   ],
  // },
];

/**
 * 查询
 */
function handleQuery(paging: { page: number; limit: number }) {
  loading.value = true;
  list({
    ...tableDatasObj.value.paging,
    ...tableDatasObj.value.queryParams,
  })
    .then((res) => {
      tableDatasObj.value.list = res.list;
      tableDatasObj.value.paging.total = res.total;
      // tableDatasObj.value.add_sum = res.add_sum;
      // tableDatasObj.value.sub_sum = res.sub_sum;

      // options.reason = Object.keys(res.reason_name).map((key) => ({
      //   label: res.reason_name[key],
      //   value: key,
      // }));
      // options.handle_type = Object.keys(res.handle_type_name).map((key) => ({
      //   label: res.handle_type_name[key],
      //   value: key,
      // }));
      // options.capital_type = Object.keys(res.capital_type_name).map((key) => ({
      //   label: res.capital_type_name[key],
      //   value: key,
      // }));
      // options.source = Object.keys(res.source_name).map((key) => ({
      //   label: res.source_name[key],
      //   value: key,
      // }));

      // Object.keys(options).map((key) => {
      //   const item = initSearchForm.value.initKeys;
      //   const i = item.findIndex((item) => item.key === key);

      //   if (i > -1) {
      //     initSearchForm.value.initKeys[i].options = options[key];
      //   }
      // });
    })
    .finally(() => {
      loading.value = false;
    });
  // if (tableDatasObj.paging.typeCode) {
  // loading.value = true;
  // getDictPage(queryParams)
  //   .then(({ data }) => {
  //     dictList.value = data.list;
  //     total.value = data.total;
  //   })
  //   .finally(() => (loading.value = false));
  // }
}
// 完*********************************************

// const initDialogForm = ref({
//   // 表单标签位置
//   formAttrs: {
//     // 是否内联
//     // inline: true,
//     labelPosition: "top",
//   },
//   rowAttrs: {
//     // 行内表单数量
//     columnsNum: 2,
//   },
//   // 初始化表单字段
//   initKeys: <any>[],
// });

// let initDialogFormBak = cloneDeep(initDialogForm.value);

// const isHasOptions = [
//   {
//     // 标签
//     label: "关闭",
//     // 值
//     value: 0,
//   },
//   {
//     // 标签
//     label: "开启",
//     // 值
//     value: 1,
//   },
// ];

// const switchFieldArr = [
//   "allow_df",
//   "status",
//   "is_check",
//   "hide_withdrawa",
//   "audit_withdrawal_user",
//   "allow_fore_launch_df",
//   "google_check",
//   "support_back",
// ];
// const switchFieldHandle = {
//   getDisplay(field: any) {
//     return (field || "").toString() === "1";
//   },
//   getField(field: Boolean) {
//     return field ? "1" : "2";
//   },
// };

// function handleTableBtnClick(row: object, title: string) {
//   dialog.type = title;
//   dialog.singleData = tableDatasObj.value.list.find((item) => item.id === row.id);

//   if (title === "add") {
//     dialog.visible = true;
//     dialog.title = "添加用户";
//     dialog.leftBtnText = "确 定";
//     dialog.rightBtnText = "取 消";

//     initDialogForm.value.initKeys = [
//       {
//         // 类型
//         type: "input",
//         // 唯一标识
//         key: "mer_name",
//         // 表单属性
//         formAttrs: {
//           label: "商户户名",
//         },
//         // 控制属性
//         controlAttrs: {
//           // 提示文本
//           placeholder: "请输入商户户名",
//           // 是否可清空
//           clearable: true,
//         },
//         // 控制事件
//         controlOn: {},
//       },
//       {
//         // 类型
//         type: "input",
//         // 唯一标识
//         key: "nick_name",
//         // 表单属性
//         formAttrs: {
//           label: "昵称",
//         },
//         // 控制属性
//         controlAttrs: {
//           // 提示文本
//           placeholder: "请输入昵称",
//           // 是否可清空
//           clearable: true,
//         },
//         // 控制事件
//         controlOn: {},
//       },
//       {
//         // 类型
//         type: "input",
//         // 唯一标识
//         key: "password",
//         // 表单属性
//         formAttrs: {
//           label: "密码",
//         },
//         // 控制属性
//         controlAttrs: {
//           // 提示文本
//           placeholder: "请输入密码（6-12位）",
//           // 是否可清空
//           clearable: true,
//           maxlength: 12,
//         },
//         // 控制事件
//         controlOn: {},
//       },
//       {
//         // 类型
//         type: "input",
//         // 唯一标识
//         key: "confirm_password",
//         // 表单属性
//         formAttrs: {
//           label: "确认密码",
//         },
//         // 控制属性
//         controlAttrs: {
//           // 提示文本
//           placeholder: "请输入确认密码（6-12位）",
//           // 是否可清空
//           clearable: true,
//           maxlength: 12,
//         },
//         // 控制事件
//         controlOn: {},
//       },
//       // {
//       //   // 类型
//       //   type: "input",
//       //   // 唯一标识
//       //   key: "type",
//       //   // 表单属性
//       //   formAttrs: {
//       //     label: "商户类型",
//       //   },
//       //   // 控制属性
//       //   controlAttrs: {
//       //     // 提示文本
//       //     placeholder: "请选择商户类型",
//       //     // 是否可清空
//       //     clearable: true,
//       //   },
//       //   // 选项
//       //   options: [
//       //     {
//       //       label: "普通商户",
//       //       value: 1,
//       //     },
//       //     {
//       //       label: "代理商户",
//       //       value: 2,
//       //     },
//       //   ],
//       //   // 控制事件
//       //   controlOn: {},
//       // },
//     ];
//   } else if (title === "reset") {
//     dialog.visible = false;

//     ElMessageBox.confirm("确认重置商户密钥码？", "信息", {
//       type: "warning",
//     }).then(() => {
//       secret_key_reset({ id: dialog.singleData.id }).then(() => {
//         ElMessage.success("重置成功");
//         closedDialog();
//         handleQuery();
//       });
//     });
//   } else if (title === "groud-send") {
//   } else if (title === "unbind-all") {
//     ElMessageBox.confirm("确认一键解绑所有商户TG？", "信息", {
//       confirmButtonText: "确定",
//       cancelButtonText: "取消",
//       type: "warning",
//     }).then(() => {
//       // 访问接口；刷新列表
//     });
//   } else if (title === "key") {
//     // 新增支付产品
//     dialog.title = "敏感操作，请验证安全码";
//     dialog.leftBtnText = "确 定";
//     dialog.rightBtnText = "取 消";

//     initDialogForm.value.initKeys.push(
//       ...[
//         // 产品名称
//         // 通道代码
//         // 通道显示
//         // 状态
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "qqq5",
//           // 表单属性
//           formAttrs: {
//             label: "产品名称",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入产品名称",
//             // 是否可清空
//             clearable: true,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "qqq5",
//           // 表单属性
//           formAttrs: {
//             label: "通道代码",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入通道代码",
//             // 是否可清空
//             clearable: true,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "qqq5",
//           // 表单属性
//           formAttrs: {
//             label: "通道显示",
//           },
//           // 控制属性
//           controlAttrs: {
//             value: false,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "qqq5",
//           // 表单属性
//           formAttrs: {
//             label: "状态",
//           },
//           // 控制属性
//           controlAttrs: {
//             value: false,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//       ]
//     );
//   } else if (title === "pay-on-off") {
//     // 渠道配置
//     dialog.visible = false;

//     dialogForPayOnOff.visible = true;
//     dialogForPayOnOff.type = "status";
//     dialogForPayOnOff.id = row.id;
//     dialogForPayOnOff.title = "商户支付产品";
//     dialogForPayOnOff.leftBtnText = "确 定";
//     dialogForPayOnOff.rightBtnText = "取 消";
//   } else if (title === "rate") {
//     // 调整费率
//     dialog.visible = false;

//     dialogForPayOnOff.visible = true;
//     dialogForPayOnOff.type = "rate";
//     dialogForPayOnOff.id = row.id;
//     dialogForPayOnOff.title = "商户支付渠道";
//     dialogForPayOnOff.leftBtnText = "确 定";
//     dialogForPayOnOff.rightBtnText = "取 消";
//   } else if (title === "agency-rate") {
//     // 设置费率
//     dialog.visible = true;
//     dialog.title = "调整码商费率（统一按照百分比计算）";
//     dialog.leftBtnText = "确 定";
//     dialog.rightBtnText = "取 消";
//     initDialogForm.value.initKeys.push(
//       ...[
//         {
//           // 类型
//           type: "input-number",
//           // 唯一标识
//           key: "df_one_fee",
//           // 表单属性
//           formAttrs: {
//             label: "单笔手续费（元）",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入单笔手续费（元）",
//             // 是否可清空
//             clearable: true,
//             min: 0,
//             style: {
//               width: "100%",
//             },
//             value: dialog.singleData.df_one_fee,
//           },
//           appendTxt: "%",
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input-number",
//           // 唯一标识
//           key: "df_rate",
//           // 表单属性
//           formAttrs: {
//             label: "费率（1代表1%）",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入费率（1代表1%）",
//             // 是否可清空
//             clearable: true,
//             min: 0,
//             max: 100,
//             style: {
//               width: "100%",
//             },
//             value: dialog.singleData.df_rate,
//           },
//           appendTxt: "%",
//           // 控制事件
//           controlOn: {},
//         },
//       ]
//     );
//   } else if (title === "tg") {
//     // 设置费率
//     dialog.title = "调整码商费率（统一按照百分比计算）";
//     dialog.leftBtnText = "确 定";
//     dialog.rightBtnText = "取 消";
//     initDialogForm.value.initKeys.push(
//       ...[
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "rate",
//           // 表单属性
//           formAttrs: {
//             label: "自定义引导语",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入需要设置的费率",
//             // 是否可清空
//             clearable: true,
//           },
//           appendTxt: "%",
//           // 控制事件
//           controlOn: {},
//         },
//       ]
//     );
//   } else if (title === "unbind-tg") {
//     // 设置费率
//     dialog.title = "调整码商费率（统一按照百分比计算）";
//     dialog.leftBtnText = "确 定";
//     dialog.rightBtnText = "取 消";
//     initDialogForm.value.initKeys.push(
//       ...[
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "rate",
//           // 表单属性
//           formAttrs: {
//             label: "自定义引导语",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入需要设置的费率",
//             // 是否可清空
//             clearable: true,
//           },
//           appendTxt: "%",
//           // 控制事件
//           controlOn: {},
//         },
//       ]
//     );
//   } else if (title === "edit") {
//     // 设置费率
//     const switchFieldObj = Object.fromEntries(
//       switchFieldArr.map((field) => {
//         return [[field], switchFieldHandle.getDisplay(dialog.singleData[field])];
//       })
//     );
//     let switchData = (dialog.visible = true);
//     dialog.title = "编辑商户";
//     dialog.leftBtnText = "确 定";
//     dialog.rightBtnText = "取 消";
//     initDialogForm.value.initKeys.push(
//       ...[
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "mer_name",
//           // 表单属性
//           formAttrs: {
//             label: "商户名称",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入商户名称",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.mer_name,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "nick_name",
//           // 表单属性
//           formAttrs: {
//             label: "昵称",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入昵称",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.nick_name,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "password",
//           // 表单属性
//           formAttrs: {
//             label: "登录密码",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入登录密码",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.password,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "confirm_password",
//           // 表单属性
//           formAttrs: {
//             label: "确认密码",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入确认密码",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.confirm_password,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "safety_code",
//           // 表单属性
//           formAttrs: {
//             label: "安全码",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入安全码",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.safety_code,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "allow_df",
//           // 表单属性
//           formAttrs: {
//             label: "是否允许代付",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入是否允许代付",
//             // 是否可清空
//             clearable: true,
//             value: switchFieldObj["allow_df"],
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "withdrawal_fee",
//           // 表单属性
//           formAttrs: {
//             label: "提现手续费",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入提现手续费",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.withdrawal_fee,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "status",
//           // 表单属性
//           formAttrs: {
//             label: "状态",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入状态",
//             // 是否可清空
//             clearable: true,
//             value: switchFieldObj["status"],
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "is_check",
//           // 表单属性
//           formAttrs: {
//             label: "是否审核提现账户",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入是否审核提现账户",
//             // 是否可清空
//             clearable: true,
//             value: switchFieldObj["is_check"],
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input-number",
//           // 唯一标识
//           key: "min_amount",
//           // 表单属性
//           formAttrs: {
//             label: "最小金额",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入最小金额",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.min_amount,
//             style: {
//               width: "100%",
//             },
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input-number",
//           // 唯一标识
//           key: "max_amount",
//           // 表单属性
//           formAttrs: {
//             label: "最大金额",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入最大金额",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.max_amount,
//             style: {
//               width: "100%",
//             },
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "hide_withdrawa",
//           // 表单属性
//           formAttrs: {
//             label: "是否隐藏提现",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入是否隐藏提现",
//             // 是否可清空
//             clearable: true,
//             value: switchFieldObj["hide_withdrawa"],
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "login_whitelist",
//           // 表单属性
//           formAttrs: {
//             label: "登录IP白名单（以逗号分隔）",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入登录IP白名单（以逗号分隔）",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.login_whitelist,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "df_whitelist",
//           // 表单属性
//           formAttrs: {
//             label: "代付IP白名单（以逗号分隔）",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入代付IP白名单（以逗号分隔）",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.df_whitelist,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "audit_withdrawal_user",
//           // 表单属性
//           formAttrs: {
//             label: "是否审核提现账户",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入是否审核提现账户",
//             // 是否可清空
//             clearable: true,
//             value: switchFieldObj["audit_withdrawal_user"],
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "allow_fore_launch_df",
//           // 表单属性
//           formAttrs: {
//             label: "是否允许前台发起代付",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入是否允许前台发起代付",
//             // 是否可清空
//             clearable: true,
//             value: switchFieldObj["allow_fore_launch_df"],
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "google_check",
//           // 表单属性
//           formAttrs: {
//             label: "是否需要google验证",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入是否需要google验证",
//             // 是否可清空
//             clearable: true,
//             value: switchFieldObj["google_check"],
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input",
//           // 唯一标识
//           key: "google_keygoogle",
//           // 表单属性
//           formAttrs: {
//             label: "密钥",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入密钥",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.google_keygoogle,
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "switch",
//           // 唯一标识
//           key: "support_back",
//           // 表单属性
//           formAttrs: {
//             label: "是否支持回调",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入是否支持回调",
//             // 是否可清空
//             clearable: true,
//             value: switchFieldObj["support_back"],
//           },
//           // 控制事件
//           controlOn: {},
//         },
//         {
//           // 类型
//           type: "input-number",
//           // 唯一标识
//           key: "df_rate",
//           // 表单属性
//           formAttrs: {
//             label: "代付费率",
//           },
//           // 控制属性
//           controlAttrs: {
//             // 提示文本
//             placeholder: "请输入代付费率",
//             // 是否可清空
//             clearable: true,
//             value: dialog.singleData.df_rate,
//             style: {
//               width: "100%",
//             },
//           },
//           // 控制事件
//           controlOn: {},
//         },
//       ]
//     );

//     list({
//       page: 1,
//       limit: 999999,
//     }).then((res) => {});
//   } else if (title === "del") {
//     // 删除
//     ElMessageBox.confirm("确定要删除吗？", "删除", {
//       confirmButtonText: "确定",
//       cancelButtonText: "取消",
//       type: "warning",
//     }).then(() => {
//       let params = {
//         ids: [dialog.singleData].map((item) => item.id).join(","),
//       };

//       del(params).then((res) => {
//         if (tableDatasObj.value.list.length === 1) {
//           if (tableDatasObj.value.paging.page > 1) {
//             --tableDatasObj.value.paging.page;
//           }
//         }

//         handleQuery();
//       });
//     });
//   } else if (title === "clearing-rate") {
//     dialog.visible = false;

//     ElMessageBox.confirm("确定要将所有码商费率清0吗？", "将所有码商费率清0", {
//       confirmButtonText: "确定",
//       cancelButtonText: "取消",
//       type: "warning",
//     }).then(() => {
//       // 访问接口；刷新列表
//     });
//   }
// }

// 弹窗对象
// const dialog = reactive({
//   visible: false,
//   type: "user-form",
//   width: 800,
//   title: "",
//   leftBtnText: "确 定",
//   rightBtnText: "取 消",
// });
// const dialogBak = { ...dialog };
// const dialogForPayOnOff = reactive({
//   visible: false,
//   type: "user-form",
//   width: 1200,
//   title: "",
//   // leftBtnText: "确 定",
//   rightBtnText: "取 消",
//   singleData: {},
//   closeDialog() {
//     dialogForPayOnOff.visible = false;
//   },
//   handleLeftClick() {},
//   handleRightClick() {
//     dialogForPayOnOff.closeDialog();
//   },
// });

// let formDialogId = ref<FormInstance>();

/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 */
// function closeDialog() {
//   dialog.visible = false;
// }
// function closedDialog() {
//   formDialogId.value?.resetFields();
//   formDialogId.value?.clearValidate();
//   initDialogForm.value.initKeys.splice(0);
//   Object.keys(dialogBak).map((key) => {
//     dialog[key] = dialogBak[key];
//   });

//   initDialogForm.value = cloneDeep(initDialogFormBak);
// }

// let formDialogModel = ref({});
// function handleLeftClick() {
//   if (dialog.type === "add") {
//     formDialogId.value.validate((valid, fields) => {
//       if (valid) {
//         let params = { ...formDialogModel.value };

//         // params.pass_show = params.pass_show ? 1 : 2;
//         // params.order_float_amount = params.order_float_amount ? 1 : 2;
//         // params.pay_page_sub_name = params.pay_page_sub_name ? 1 : 2;
//         // params.int_skm_amount = params.int_skm_amount ? 1 : 2;
//         // params.skm_amount_range = params.skm_amount_range ? 1 : 2;
//         // params.handle_order_status = params.handle_order_status ? 1 : 2;
//         // params.status = params.status ? 1 : 2;

//         add(params).then((res) => {
//           ElMessage.success("添加商户成功");
//           closeDialog();
//           handleQuery();
//         });
//       }
//     });
//   } else if (dialog.type === "agency-rate") {
//     formDialogId.value.validate((valid, fields) => {
//       if (valid) {
//         // let params = { ...dialog.singleData, ...formDialogModel.value };
//         let params = { ...formDialogModel.value, id: dialog.singleData.id };

//         edit(params).then((res) => {
//           ElMessage.success("代付费率修改成功");
//           closeDialog();
//           handleQuery();
//         });
//       }
//     });
//   } else if (dialog.type === "edit") {
//     formDialogId.value.validate((valid, fields) => {
//       if (valid) {
//         let params = { ...formDialogModel.value, id: dialog.singleData.id };

//         switchFieldArr.map((field) => {
//           params[field] = switchFieldHandle.getField(params[field]);
//         });

//         edit(params).then((res) => {
//           ElMessage.success("修改用户资料成功");
//           closeDialog();
//           handleQuery();
//         });
//       }
//     });
//   }
// }

// function handleRightClick() {
//   // formDialogId.
//   closeDialog();
// }

onMounted(() => {
  tableDatasObj.value.queryParams = { ...searchForm.value };

  handleQuery(tableDatasObj.value.paging);
});
</script>

<style lang="scss" scoped>
.info-container {
  font-size: var(--el-font-size-extra-small);
  span {
    background-color: #1e9fff;
    display: inline-block;
    padding: 0 10px;
    margin: 0 5px;
    color: #fff;
  }
}
</style>
